<!DOCTYPE html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" th:href="@{/static/css/style.css}" />
    <link rel="stylesheet" th:href="@{/static/css/register.css}" />
    <script type="text/javascript" th:src="@{/static/script/vue.js}"></script>
    <script type="text/javascript" th:src="@{/static/script/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/script/regist.js}"></script>
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
  </head>
  <body>
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" th:src="@{/static/img/logo.gif}" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form th:action="@{/user/regist}" method="post" id="registForm" >
          <input type="hidden" name="_method" value="put"/>

          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" name="uname" v-model="uname" />
            </div>
            <span class="errMess" id="unameSpan">用户名应为6~16位数字和字母组成</span>
             <span class="errMess" id="ckUname">用户名已存在</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password" placeholder="请输入密码" name="pwd" v-model="pwd"/>
            </div>
            <span class="errMess" id="pwdSpan">密码的长度至少为8位</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码" v-model="pwdConfirm"/>
            </div>
            <span class="errMess" id="pwdSpan2">密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" name="email" v-model="email"/>
            </div>
            <span class="errMess" id="emailSpan">请输入正确的邮箱格式</span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="请输入验证码" name="verifyCodeActual" v-model="verifyCode" />
                <img id="captcha_img" alt="点击更换" title="点击更换"
                     @click="refresh"  th:src="@{/kaptcha}" />
              </div>
            </div>
            <span class="errMess" id="verifyCodeSpan">验证码错误</span>
          </div>
          <button type="submit" @click="registerCheck" class="btn" >注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </body>
</html>
